<script>
	$(function() {	
		<?php
			foreach($seats as $seat) {
		?>
				$("#<?php echo $seat->seat; ?>").addClass("bought");
		<?php
			}
		?>
	});
	
	function selectSeat(id) {
		if($("#" + id).hasClass("bought") == false) {
			$("#" + id).toggleClass("selected");
			for(var i = 1; i <= 3; i++) {
				if(($("#" + i).hasClass("selected") == true) && (i != id))
					$("#" + i).toggleClass("selected");
			}
		}
	}

	function submitForm() {
		var flag = false;
		
		for(var i = 1; i <= 3; i++) {
			if($("#" + i).hasClass("selected")) {
				$("#seat_id").val(i);
				flag = true;
			}
		}

		if(flag == false) {
			alert("You have to select a seat.");
			$("#seat_id").val(0);
		}
	}				
</script>

<div class="row">
<form class="form-inline" action="payment" method="post">
	<div class="span4">
		<ul class="thumbnails">
			<li class="span4">
				<div class="thumbnail">
					<!--<img data-src="chairs.jpg" alt="">-->
					<h3>Seats</h3>
					<p>Click on the chosen seat so we can continue with your purchase.</p>
				</div>
			</li> 
		</ul>
	</div>	

	
		<div class="span7 offset1">
			<ul class="thumbnails">
				<li>
					<div class="thumbnail" id="1" onClick="selectSeat(this.id)">
						<img data-src="lonely_seat.jpg/300x200" alt="">
						<h3>Lonely Seat</h3>
					</div>
				</li>
				<li>
					<div class="thumbnail" id="2" onClick="selectSeat(this.id)">
						<img data-src="left_seat/300x200" alt="">
						<h3>Love Seat - Left</h3>
					</div>
				</li>
				<li>
					<div class="thumbnail" id="3" onClick="selectSeat(this.id)">
						<img data-src="right_seat/300x200" alt="">
						<h3>Love Seat - Right</h3>
					</div>
				</li>
			</ul>
		</div>
		
		<?php 
			echo "<table class=\"span7 offset1\">";
			echo "<thead><tr><th>Title</th><th>Theater</th><th>Date</th><th>Availability</th><th>Price</th></tr></thead>";
			echo "<tbody>";
			echo "<tr>";
			echo "<td>" . $showtime->title . "</td>";
			echo "<td>" . $showtime->name . " - " . $showtime->address .  "</td>";
			echo "<td>" . $showtime->date . " - " . $showtime->time .  "</td>";
			echo "<td>" . $showtime->available . "</td>";
			echo "<td>$6.00</td>";
			echo "</tr>";
			echo "</tbody>";
			echo "</table>";
			echo '<input type="hidden" name="seatId" id="seat_id" value="" />';
			echo '<input type="hidden" name="showtimeId" id="showtime_id" value="' . $showtime->id . '"/>';
		?>	
	
		<div class="row">
			<div class="span2 offset10">
				<button type="submit" class="btn btn-large btn-inverse" onClick="submitForm()">Next</button>
			</div>
		<!--  </div> -->
		
	</form>
</div> <!-- closing row -->